<template>
  <div class="app-container">
    <ComponentSearchBar placeholder="输入名称搜索" v-model:name="query.name" @query = "onSearch" >
      <div class="w-a mr">
      <ZhongyiComponentsTagTree v-model="query.tagId" type="2" />
    </div>
      </ComponentSearchBar>

    <el-card class="box-card mt">
      <el-button type="primary"  @click="onAdd">
        <el-icon :size="20" class="mr-1">
          <IconIcOutlineAdd />
        </el-icon>添加
      </el-button>


      <ZhongyiFangjiEdit 
        :data="current"
        v-model:isShow="isShow"
            :title="title"
            @onChange = "onChange"
            @onClose = "isShow = false"
            />

        <!--表格渲染-->
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%; margin-top: 10px"
        >
          

          <el-table-column
            :show-overflow-tooltip="true"
            prop="name"
            label="方剂名"
            width="80"
          />
        
          
          
          <el-table-column
            :show-overflow-tooltip="true"
            prop="name"
            label="类别"
            width="100"
          >
           <template  #default="scope">
              
                 {{ scope.row.tag.name }}
            
            </template>
            </el-table-column>

            <el-table-column prop="zhuZhi" label="主治" />
            <el-table-column prop="gongXiao" label="功效" />

          <el-table-column label="状态" align="center" prop="isDeleted"   width="80">
            <template  #default="scope">
              <el-tag type="danger" v-if="scope.row.isDeleted">禁用</el-tag>
              <el-tag type="success" v-else>正常</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" label width="180">
            <template  #default="scope">
              <ComponentCrud :data="scope" @onEdit="onEdit" @onRestore="onRestore" @onDelete="onDelete" />
            </template>
          </el-table-column>
        </el-table>
        <ComponentPagination 
      :total="total" 
          v-model:page-size="query.pageSize"
          v-model:page="query.page"/>

      </el-card>
   
  </div>
</template>

<script>
import { queryData, deletes, restore } from "@/api/zhongyi/fangji";

export default {
  name: "fangji",
  components: {  },
  data() {
    return {
      query: {
        name: "",
        pageSize:10,
        currentPage:1
      },
      list: null,
      total: 0,
      listLoading: true,
      current: "",
      isShow: false,
      title: "",
      showBindRole: false,
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      queryData(this.query).then((res) => {
        this.list = res.result.data;
        this.total = res.result.total;
        this.listLoading = false;
      });
    },
    onAdd() {
      this.current = "";
      this.isShow = true;
      this.title = "添加方剂";
    },
    onEdit(row) {
      this.current = row.id;
      this.isShow = true;
      this.title = "编辑方剂";
    },
    onChange() {
      this.getList();
    },
    onSearch() {
      //this.query = query;
      this.getList();
    },
    onDelete(row) {
      deletes(row.id).then((_) => {
        row.isDeleted = true;
      });
    },
    onRestore(row) {
      restore(row.id).then((_) => {
        row.isDeleted = false;
      });
    },
    onBindRole(row) {
      this.showBindRole = true;
      this.currentUser = row.id;
       this.title = "绑定角色";
    },
  },
  mounted: function () {},
  watch: {
    'query.currentPage': {
      handler(val, oldVal) {
        console.log('watch', this.query)
        this.getList();
      },
      deep: true
    },
    'query.pageSize': {
      handler(val, oldVal) {
        console.log('watch', this.query)
        this.getList();
      },
      deep: true
    },
  }
};
</script>


